<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request.js'

export default {
  name: 'CheckNovels',
  setup() {
    const checkNovels = ref([])
    const hasData = ref(false)

    const fetchCheckNovels = async () => {
      try {
        const response = await request.get('/novel/page', {
          params: {
            status: 1
          }
        })
        if (response.code === 1) {
          checkNovels.value = response.data.list
          hasData.value = checkNovels.value.length > 0
        } else {
          ElMessage.error(response.msg || '获取审核小说列表失败')
        }
      } catch (error) {
        ElMessage.error('网络请求错误')
      }
    }

    const handlePass = async (novel) => {
      try {
        const response = await request.put('/novel', { id: novel.id,status: 2 })
        if (response.code === 1) {
          ElMessage.success('审核通过成功')
          fetchCheckNovels()
        } else {
          ElMessage.error(response.msg || '审核通过失败')
        }
      } catch (error) {
        ElMessage.error('网络请求错误')
      }
    }

    const handleReject = async (novel) => {
      try {
        const response = await request.put('/novel', { id: novel.id, status: 3 })
        if (response.code === 1) {
          ElMessage.success('审核不通过成功')
          fetchCheckNovels()
        } else {
          ElMessage.error(response.msg || '审核不通过失败')
        }
      } catch (error) {
        ElMessage.error('网络请求错误')
      }
    }

    onMounted(() => {
      fetchCheckNovels()
    })

    return {
      checkNovels,
      hasData,
      handlePass,
      handleReject
    }
  }
}
</script>

<template>
  <div class="checkNovels-container">
    <el-table :data="checkNovels" style="width: 100%" v-if="hasData">
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="avatar" label="封面">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="封面" style="width: 50px; height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="authorName" label="作者" width="180"></el-table-column>
      <el-table-column prop="category" label="类别" width="100"></el-table-column>
      <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
      <el-table-column prop="publishTime" label="发布日期"></el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button size="mini" @click="handlePass(scope.row)">通过</el-button>
          <el-button size="mini" type="danger" @click="handleReject(scope.row)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-else style="text-align: center; margin-top: 20px;">
      <p>暂无相关数据</p>
    </div>
  </div>
</template>

<style scoped>
.checkNovels-container {
  padding: 20px;
}
</style>